import React, { FC } from 'react'
import { List, Radio, Typography } from 'antd'
import prices from '../../helpers/price'
import { RadioChangeEvent } from 'antd/lib/radio'

const { Title } = Typography

interface Props {
    handleFilter: (arg: number[]) => void
}
const RadioBox: FC<Props> = ({ handleFilter }) => {
    // 单选框改变时获取当前的数组 array，修改筛选条件
    const onChange = (event: RadioChangeEvent) => {
        handleFilter(event.target.value)
    }
    return (
    <>
        <Title level={4}>按照价格筛选</Title>
        {/* 单选框 */}
        <Radio.Group>
            <List dataSource={prices} renderItem={item => (
                <List.Item>
                    <Radio
                        value={item.array}
                        onChange={onChange}
                    >{item.name}</Radio>
                </List.Item>
            )} />
        </Radio.Group>
    </>
    )
}

export default RadioBox